<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { computed, ref } from 'vue';


interface Props {
  type: string;
  illnessType: string;
}
defineProps<Props>();
//科室列表
const depList =ref<DepartData[]>([])
//获取科室列表
const getDepList =async()=>{
  //调用api
const res=await departmentListApi()
//渲染列表数据
depList .value=res||[]
}
getDepList ()
// 2. 当前选中的下标
const activeIndex = ref(0)
//切换选中
const changeTab=(i:number)=>{
  activeIndex.value = i
}
// 3. 获取二级科室
const subDepList = computed(()=> depList.value[activeIndex.value]?.child||[])
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        class="department-item"
        :class="{ active: activeIndex === index }"
         v-for="(item, index) in depList"
        :key="item.id"
        @click="changeTab(index)">
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator 
      v-for="item in subDepList" 
      :key="item.id" 
      hover-class="none" 
      :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
      class="department-item">
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>